<template>
  <div class="container-header" slot="header">
    <Form class="search">
      <Row>
        <Col span="5">
          <FormItem label="科室">
            <Select
              v-model="list.form.officeId"
              clearable 
              filterable
              @on-change="onChangeOffice"
            >
              <Option
                v-for="item in officeList"
                :value="item.id"
                :key="item.id"
              >{{item.name}}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="5">
          <FormItem label="部门">
            <Select
              v-model="list.form.departmentId"
              clearable 
              filterable
              @on-change="onChangeDpt"
            >
            <Option
              v-for="item in dptList"
              :value="item.id"
              :key="item.id"
            >{{item.name}}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="5">
          <FormItem label="经销商">
            <Select 
              v-model="list.form.distributorId"
              clearable 
              filterable
              @on-change="onChangeDistr">
              <Option
                  v-for="item in officeAll"
                  :value="item.distributorId"
                  :key="item.id"
              >{{item.distributorName}}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="5">
          <FormItem label="品牌">
            <SelectList
              v-model="list.form.brandId"
              listType="selfList"
              :selfList="brandList"
            />
          </FormItem>
        </Col>
        <Col span="2">
          <Button class="btn-search mt5 ml" type="primary" icon="ios-search" @click="onSearchBtnClick"></Button>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
  import SelectList from '@/components/SelectList'
  import { mapGetters } from 'vuex'

  export default {
    props: {
      list: {
        type: Object,
        default: ''
      }
    },
    data() {
      return {
        brandList: [],
        officeList: [],
        dptList: [],
        officeAll: []
      }
    },
    computed: {
      ...mapGetters([
        'reportDepart'
      ])
    },
    components: {
      SelectList
    },
    mounted() {
      this.getBrand()
      this.$store.dispatch('getListDepartmentTree')
      this.getOfficeList()
      this.getDptList()
      this.getDistList()
    },
    methods: {
      onChangeDistr (e) {
        if (e) {
          this.onSearchBtnClick()
        }
      },
      setBranch(row) {
        if(row) {
          this.list.form.officeId = row.id
          this.list.branch = row.children
        } else {
          this.list.branch = []
          this.list.form.officeId = null
          this.list.form.departmentId = null
        }
      },
      onSearchBtnClick() {
        let params = {
          ...this.list.form
        }
        this.$emit('onSearchBtnClick', params)
      },
      getBrand() {
        this.$ajaxGet('product/common/supplier_brand').then(res => {
          this.brandList = res.map(item => {
            item.value = item.brandId
            item.text = item.brandName
            return item
          })
        })
      },
      onChangeOffice() {
        // this.list.form.distributorId = null
        if (this.list.form.officeId) {
            this.getListByOfficeId(this.list.form.officeId)
        } else {
          this.list.form.departmentId = null
          this.list.form.distributorId = null
        }
        this.onSearchBtnClick()
      },
      onChangeDpt() {
        this.list.form.distributorId = null
        this.officeAll = []
        if (this.list.form.departmentId) {
          this.getDistByDptId(this.list.form.departmentId)
        } else if (this.list.form.officeId && !this.list.form.departmentId) {
          this.getListByOfficeId(this.list.form.officeId)
        } else {
          this.getOfficeList()
          this.getDptList()
          this.getDistList()
        }
        this.onSearchBtnClick()
      },
      getListByOfficeId(id) {
        if (!id) return
        this.$ajaxGet(`/tiger/department/list_by_office/${id}`).then(res => {
          this.dptList = []
          this.officeAll = []
          this.dptList = res.departmentList || []
          this.officeAll = res.distributorList || []
        })
      },
      getDistByDptId(id) {
        if (!id) return
        this.$ajaxGet(`/tiger/distributor/list_by_depid/${id}`).then(res => {
          this.officeAll = []
          this.officeAll = res || []
        })
      },
      getOfficeList() {
        this.$ajaxGet('/tiger/department/office_list').then(res => {
          this.officeList = []
          this.officeList = res || []
        })
      },
      getDptList() {
        this.$ajaxGet('/tiger/department/list').then(res => {
          this.dptList = []
          this.dptList = res || []
        })
      },
      getDistList() {
        this.$ajaxGet('/tiger/distributor/list_by_office_all').then(res => {
          this.officeAll = (res || []).map(item => {
            return {
              id: item.id,
              distributorId: item.distributorId,
              distributorName: item.distributorName
            }
          })
        })
      }
    }
  }
</script>
